<template>
  <div class="reg">
    <div class="login">
      <div style="margin-bottom: 20px">
        <h2 style="display: inline-block; margin-right: 20px">会员注册</h2>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 已注册可<a @click="login()" class="log">直接登录</a>
      </div>
      <hr />
      
      <!-- 监听表单的提交事件  当表单提交时，阻止默认的提交行为（页面不会刷新）但允许你在 Vue 实例中定义自己的提交处理逻辑 -->
      <form @submit.prevent>
        <div style="margin-top: 25px">
          <input type="text" placeholder="用户名" v-model="user.userName" @blur="validateUserName" />
          <span v-if="userNameError">{{ userNameError }}</span>
        </div>
        <div>
          <input type="password" placeholder="密码由>8位,大写小写字母数字组成" v-model="user.password" @blur="validatePassword" />
          <span v-if="passwordError">{{ passwordError }}</span>
        </div>
        <label class="tk">
          <input type="checkbox" v-model="termsAccepted" required />
          我已阅读并接受以下条款：
          <a href="https://www.vip.com/service_terms" target="_blank" style="color: #3cbdff">《唯品会服务条款》</a>
          和
          <a href="https://www.vip.com/privacy_policy" target="_blank" style="color: #3cbdff">《唯品会基本功能隐私政策》</a>
        </label>
        <button @click="reg()" class="zc" :disabled="!isValid">注册</button>
      </form>
    </div>
  </div>
</template>

<script setup>
import axios from "axios";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessageBox } from "element-plus"; // 引入 Element Plus 的弹窗组件
const termsAccepted = ref(false);
const router = useRouter();
const user = ref({
  userName: "",
  password: "",
});
const userNameError = ref("");
const passwordError = ref("");
const isValid = ref(true); // 用于控制注册按钮的禁用状态

// 验证用户名
const validateUserName = async () => {
  // 先进行基本格式验证
  if (!/^[A-Za-z]{2,}$/.test(user.value.userName)) {
    userNameError.value = "用户名只能是英文大于两位";
    isValid.value = false;
    return false; // 格式错误直接返回
  }

  try {
    // 清除之前的错误信息
    userNameError.value = "";

    // 检查用户名是否存在
    const response = await axios.get(`http://127.0.0.1:3000/api/user/getAllUsers`);
    console.log(response.data.data)
    const existingUser = response.data.data.find(item => item.username === user.value.userName);
    console.log(existingUser)
    if (existingUser) {
      userNameError.value = "用户名已存在";
      isValid.value = false;
      return false;
    }

    // 用户名可用，继续后续逻辑
    isValid.value = true;
  } catch (error) {
    console.error("检查用户名时出错:", error);
    userNameError.value = "验证用户名时发生错误";
    isValid.value = false;
    return false;
  }
};

// 验证密码
const validatePassword = () => {
  const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;
  if (!passwordRegex.test(user.value.password)) {
    passwordError.value =
      "密码必须包含大写字母、小写字母和数字且长度大于等于八位";
    isValid.value = false;
  } else {
    passwordError.value = "";
    isValid.value = true; // 仅当所有验证都通过时，才设置为 true（但这里需等待用户名验证结果）
  }
};

const reg = async () => {
  console.log(isValid.value);

  if (!isValid.value) return; // 如果验证不通过，则不执行注册请求

  try {
    const response = await axios.post("http://127.0.0.1:3000/api/user/addUser", {
      uname: user.value.userName,  // 用户名参数
      upass: user.value.password // 密码参数
    });

    console.log('响应数据:', response);

    ElMessageBox.alert("注册成功", "提示", {
      confirmButtonText: "确定",
      type: "success",
    });
    router.push("/login");
  } catch (error) {
    console.error("注册失败:", error);
    ElMessageBox.alert("注册失败，请重试", "错误", {
      confirmButtonText: "确定",
      type: "error",
    });
  }
};

const login = () => {
  router.push("/login");
};
</script>


<style>
.tk {
  font-size: 10px;
}

html {
  background-image: url("../assets/images/bj.png");
  background-size: cover;
  /* 使背景图片覆盖整个容器 */
  background-repeat: no-repeat;
  /* 防止背景图片重复 */
}

/*整体容器样式*/
.login {
  width: 360px;
  height: 380px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background: #ffffff;
  position: absolute;
  /* 绝对定位 */
  top: 150px;
  /* 向下移动 */
  right: 350px;
  /* 向右移动 */
}

.log {
  font-size: 15px;
  color: #f0afaf;
}

/*标题样式*/
h2 {
  font-size: 18px;
  color: #666;
  font-weight: bold;
}

/*表单输入框样式*/
form div {
  margin-bottom: 15px;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

/*按钮样式*/
.zc {
  width: 100%;
  padding: 10px;
  background-color: #f10180;
  color: white;
  border: none;

  cursor: pointer;
  font-size: 16px;
  margin-top: 10px;
}

.zc:hover {
  background-color: #218838;
}
</style>